import 'package:card_swiper/card_swiper.dart';
import 'package:cbec_app/components/base/base_badges.dart';
import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/base/base_page.dart';
import 'package:cbec_app/components/base/image_text_item.dart';
import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/components/common/count_down_timer.dart';
import 'package:cbec_app/components/base/base_nav_bar.dart';
import 'package:cbec_app/components/common/recommend.dart';
import 'package:cbec_app/pages/goods/controller/goods_detail_ctr.dart';
import 'package:cbec_app/routes/routes.dart';
import 'package:cbec_app/utils/ThemeConfig.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:flutter/material.dart';
import '../../../utils/logger.dart';

///砍价商品详情页
class BargainingGoodsDetail extends GetView<GoodsDetailController> {
  const BargainingGoodsDetail({super.key});

  @override
  Widget build(context) {
    return GetBuilder<GoodsDetailController>(
      builder: (controller) {
        return BasePage(
          refreshController: controller.baseRefreshCtr,
          onPageRefresh: controller.onPageRefresh,
          onPageLoading: controller.onPageLoading,
          enablePullDown: true,
          enablePullUp: false,
          isShowMenuIcon: true,
          title: '商品详情', iconType: IconType.back, children: [
          _goodsImgs(),
          _goodsInfo(),
          _goodsEvaluate(),
          _brandName(),
          Center(
            child: Container(
              margin: EdgeInsets.only(top: 10.h, bottom: 10.h),
              child: Text('详情介绍'),
            ),
          ),
          _goodsIntroduce(),

          Recommend(),
          // Center(
          //   child: Container(
          //     margin: EdgeInsets.only(top: 10.h, bottom: 10.h),
          //     child: Text('个性推荐'),
          //   ),
          // ),
          // Container(
          //   margin: EdgeInsets.only(left: 8.w, right: 8.w),
          //   child: Wrap(
          //       alignment: WrapAlignment.spaceBetween,
          //       runSpacing: 6.w,
          //       children: _createList()),
          // ),
          emptyMargin(70.h),
          _bottomOperate()
        ]);
      },
    );
  }

  ///商品图片
  Widget _goodsImgs() {
    return Container(
      width: 375.w,
      height: 375.w,
      child: Swiper(
        itemBuilder: (context, index) {
          return BaseImage(
              url:
                  'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF',
              width: 375.w,
              height: 375.w);
        },
        itemCount: 3,
        pagination: SwiperPagination(),
      ),
    );
  }

  ///商品信息
  Widget _goodsInfo() {
    return Center(
      child: Container(
        margin: EdgeInsets.only(left: 8.w, right: 8.w),
        child: Column(
          children: [
            ///价格
            Container(
              height: 81.h,
              margin: EdgeInsets.only(top: 10.h),
              decoration: const BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(24),
                      topRight: Radius.circular(24)),
                  gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [Color(0xffFD423B), Color(0xffFE332C)])),
              child: Container(
                transform: Matrix4.translationValues(0, -10.h, 0),
                margin: EdgeInsets.only(left: 16.w, right: 16.w),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      children: [
                        Text(
                          '砍价到手价',
                          style:
                              setTextStyle(14, FontWeight.w400, Colors.white),
                        ),
                        Padding(
                          padding: EdgeInsets.only(left: 7.w),
                          child: Text(
                            '￥',
                            style:
                                setTextStyle(10, FontWeight.w700, Colors.white),
                          ),
                        ),
                        Text(
                          '700',
                          style:
                              setTextStyle(20, FontWeight.w700, Colors.white),
                        ),
                        Padding(
                          padding: EdgeInsets.only(left: 10.w),
                          child: Text(
                            '500',
                            style: setTextStyle(
                                14, FontWeight.w400, Colors.white,
                                decoration: TextDecoration.lineThrough),
                          ),
                        )
                      ],
                    ),
                    Row(
                      children: [
                        Text(
                          '还剩 ',
                          style:
                              setTextStyle(14, FontWeight.w700, Colors.white),
                        ),
                        CountDownTimer(
                          timeStyle: TimeStyle.hhmmss,
                          seconds: 10,
                          countDownStyle: CountDownStyle.box,
                          style: setTextStyle(14, FontWeight.w700, Colors.red),
                          callback: () {
                            logger.d('结束');
                          },
                        )
                      ],
                    )
                  ],
                ),
              ),
            ),

            ///详情
            Container(
                transform: Matrix4.translationValues(0, -24.h, 0),
                decoration: const BoxDecoration(
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(24),
                        topRight: Radius.circular(24)),
                    color: Colors.white),
                child: Container(
                  margin: EdgeInsets.only(left: 10.w, right: 10.w, top: 17.h),
                  child: Column(
                    children: [
                      _goodsTag(),
                      _goodsName(),
                      _selectSpecifications(),
                      _goodsDelivery(),
                      _goodsService(),
                      _goodsFreight(),
                    ],
                  ),
                ))
          ],
        ),
      ),
    );
  }

  ///商品标签
  Widget _goodsTag() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          children: [
            goodsDetailTypeTag('满200-20', margin: EdgeInsets.only(right: 8.w)),
            goodsDetailTypeTag('立减80'),
          ],
        ),
        Row(
          children: [
            Container(
              width: 46.w,
              height: 21.h,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: ThemeConfig.themeColor,
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    '领券',
                    style: setTextStyle(11, FontWeight.w500, Colors.white),
                  ),
                  Padding(
                    padding: EdgeInsets.only(left: 4),
                    child: BaseImage(
                        url: 'arrow_right.png', width: 14, height: 14),
                  )
                ],
              ),
            )
          ],
        )
      ],
    );
  }

  ///商品名称
  Widget _goodsName() {
    return Padding(
      padding: EdgeInsets.only(top: 10.h),
      child: Text.rich(TextSpan(children: [
        WidgetSpan(
            child: goodsTypeTag('保税', margin: EdgeInsets.only(right: 5))),
        TextSpan(
            text: '商品很长商品很长商品很长商品很长商品很长商品很长商品很长',
            style: setTextStyle(14, FontWeight.w500, ThemeConfig.mainTextColor))
      ])),
    );
  }

  ///文本宽度
  double get textWidth => 267.7.w;

  ///选择规格
  Widget _selectSpecifications() {
    return Padding(
      padding: EdgeInsets.only(top: 10.h),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(top: 8.h),
            child: Text(
              '选择',
              style: setTextStyle(
                  14, FontWeight.w400, ThemeConfig.sectionTextColor),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 10.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    BaseImage(
                        url:
                            'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF',
                        width: 32.w,
                        height: 32.w),
                    SizedBox(
                      width: 8.w,
                    ),
                    BaseImage(
                        url:
                            'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF',
                        width: 32.w,
                        height: 32.w),
                    Container(
                      width: 47.w,
                      height: 31.h,
                      margin: EdgeInsets.only(left: 10.w),
                      alignment: Alignment.center,
                      decoration: const BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(2)),
                          color: Color(0xfff8f8f8)),
                      child: Text(
                        '共2款',
                        style: setTextStyle(
                            11, FontWeight.w400, ThemeConfig.sectionTextColor),
                      ),
                    )
                  ],
                ),
                Container(
                  margin: EdgeInsets.only(top: 10.h),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: textWidth,
                        child: Text(
                          '已选：星飞帆4段700g，0.96kg，1件，可选服务',
                          style: setTextStyle(
                              13, FontWeight.w400, ThemeConfig.mainTextColor),
                        ),
                      ),
                      Icon(Icons.navigate_next)
                    ],
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  ///配送
  Widget _goodsDelivery() {
    return Padding(
      padding: EdgeInsets.only(top: 25.h),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(top: 0.h),
            child: Text(
              '配送',
              style: setTextStyle(
                  14, FontWeight.w400, ThemeConfig.sectionTextColor),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 10.w),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      width: textWidth,
                      child: Text(
                        '四川成都市双流区公兴街道牧华路三段...',
                        style: setTextStyle(
                            13, FontWeight.w400, ThemeConfig.mainTextColor),
                      ),
                    ),
                    Icon(Icons.navigate_next)
                  ],
                ),
                Padding(
                    padding: EdgeInsets.only(top: 10.h),
                    child: Container(
                        width: textWidth,
                        child: Text(
                          '现货，18:00前下单，预计明天(02月02日)送达',
                          style: setTextStyle(
                              13, FontWeight.w400, ThemeConfig.mainTextColor),
                        )))
              ],
            ),
          )
        ],
      ),
    );
  }

  ///服务
  Widget _goodsService() {
    return Container(
      margin: EdgeInsets.only(top: 28.h, left: 0, right: 0),
      child: Row(
        children: [
          Text(
            '服务',
            style:
                setTextStyle(14, FontWeight.w400, ThemeConfig.sectionTextColor),
          ),
          Container(
            margin: EdgeInsets.only(left: 10.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                    width: textWidth,
                    child: Text(
                      '7天无理由',
                      style: setTextStyle(
                          13, FontWeight.w400, ThemeConfig.mainTextColor),
                    )),
                Icon(Icons.navigate_next)
              ],
            ),
          )
        ],
      ),
    );
  }

  ///运费
  Widget _goodsFreight() {
    return Container(
      margin: EdgeInsets.only(top: 28.h, left: 0, right: 0, bottom: 18.h),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '运费',
            style:
                setTextStyle(14, FontWeight.w400, ThemeConfig.sectionTextColor),
          ),
          Container(
            margin: EdgeInsets.only(left: 10.h),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  width: textWidth,
                  child: Text(
                    '所选地址自营订单满59元免基础运(20kg内)，超出重量加收1元/kg续重运费。',
                    style: setTextStyle(
                        13, FontWeight.w400, ThemeConfig.mainTextColor),
                  ),
                ),
                Icon(Icons.navigate_next)
              ],
            ),
          )
        ],
      ),
    );
  }

  ///评价
  Widget _goodsEvaluate() {
    return Container(
      margin: EdgeInsets.only(left: 8.w, right: 8.w, top: 10.h),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(8)),
          color: Colors.white),
      child: Container(
        margin: EdgeInsets.all(10.w),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Text(
                      '评价',
                      style: setTextStyle(
                          15, FontWeight.w700, ThemeConfig.mainTextColor),
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 4.w),
                      child: Text(
                        '(10)',
                        style: setTextStyle(
                            12, FontWeight.w400, ThemeConfig.sectionTextColor),
                      ),
                    )
                  ],
                ),
                Text(
                  '好评度99%',
                  style: setTextStyle(
                      12, FontWeight.w400, ThemeConfig.mainTextColor),
                )
              ],
            ),
            _evaluateTag(),
            _evaluateDetail(),
          ],
        ),
      ),
    );
  }

  ///评价标签
  Widget _evaluateTag() {
    return Container(
      margin: EdgeInsets.only(top: 10.h),
      child: Row(
        children: [
          evaluateTag('生活方便', margin: EdgeInsets.only(right: 34.w)),
          evaluateTag('清香扑鼻', margin: EdgeInsets.only(right: 34.w)),
        ],
      ),
    );
  }

  ///具体评价
  Widget _evaluateDetail() {
    return Container(
        margin: EdgeInsets.only(top: 10.h, bottom: 10.h),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(8)),
            color: Color(0xfff8f8f8)),
        child: Container(
          margin: EdgeInsets.only(left: 10.h, right: 15.h),
          child: Column(
            children: [
              Container(
                margin: EdgeInsets.only(top: 8.h),
                child: Row(
                  children: [
                    BaseImage(
                      url:
                          'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF',
                      width: 28.w,
                      height: 28.w,
                      borderRadius: BorderRadius.all(Radius.circular(28.w)),
                    ),
                    Container(
                      margin: EdgeInsets.only(left: 4.w),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            '彩彩',
                            style: setTextStyle(
                                12, FontWeight.w400, ThemeConfig.subTextColor),
                          ),
                          Row(
                            children: [
                              Icon(
                                Icons.star,
                                size: 12,
                                color: ThemeConfig.themeColor,
                              ),
                              Icon(
                                Icons.star,
                                size: 12,
                                color: ThemeConfig.themeColor,
                              ),
                              Icon(
                                Icons.star,
                                size: 12,
                                color: ThemeConfig.themeColor,
                              ),
                              Icon(
                                Icons.star,
                                size: 12,
                                color: ThemeConfig.themeColor,
                              ),
                              Icon(
                                Icons.star,
                                size: 12,
                                color: ThemeConfig.themeColor,
                              ),
                            ],
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 10.h, bottom: 8.h),
                child: Text(
                  '一报能这过地产近：里笑标世么育不个里资者省造清要立停不人区住处简化陆展第程，深经舞面深说飞自笑。',
                  style: setTextStyle(
                      13, FontWeight.w400, ThemeConfig.mainTextColor),
                ),
              )
            ],
          ),
        ));
  }

  ///品牌名称
  Widget _brandName() {
    return Container(
      margin: EdgeInsets.only(top: 15.h, left: 8.w, right: 8.w),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(8)),
          gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color(0xffFFF2FB), Color(0xffFEFCFD)])),
      child: Container(
        margin:
            EdgeInsets.only(left: 10.w, top: 10.h, bottom: 10.h, right: 15.w),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                BaseImage(
                  url:
                      'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF',
                  width: 60.w,
                  height: 60.w,
                  borderRadius: BorderRadius.all(Radius.circular(60.w)),
                ),
                Container(
                  margin: EdgeInsets.only(left: 8.w),
                  child: Column(
                    children: [
                      Text(
                        '品牌名称',
                        style: setTextStyle(
                            14, FontWeight.w500, ThemeConfig.mainTextColor),
                      ),
                      Row(
                        children: [
                          Text(
                            '商品数量',
                            style: setTextStyle(12, FontWeight.w400,
                                ThemeConfig.sectionTextColor),
                          ),
                          Text(
                            '10',
                            style: setTextStyle(
                                12, FontWeight.w400, ThemeConfig.boldTextColor),
                          )
                        ],
                      )
                    ],
                  ),
                )
              ],
            ),
            Icon(Icons.navigate_next)
          ],
        ),
      ),
    );
  }

  ///商品介绍
  Widget _goodsIntroduce() {
    return Container(
      margin: EdgeInsets.only(left: 8.w, right: 8.w),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(8), topRight: Radius.circular(8)),
          color: Colors.white),
      child: Column(
        children: [
          BaseImage(
              url:
                  'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF',
              width: 359.w,
              height: 100.h)
        ],
      ),
    );
  }

  ///生成商品列表
  List<Widget> _createList() {
    List<Widget> arr = [];
    for (int i = 0; i < 4; i++) {
      // arr.add(GoodsItem(
      //     url: 'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF'));
    }
    return arr;
  }

  ///底部操作栏
  Widget _bottomOperate() {
    return Positioned(
        left: 0,
        bottom: 0,
        child: Container(
          width: 375.w,
          height: 62.h,
          color: Colors.white,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                margin: EdgeInsets.only(left: 9.w),
                child: Row(
                  children: [
                    _setBtnStyle('customer.png', '客服'),
                    SizedBox(
                      width: 8.w,
                    ),
                    _setBtnStyle(controller.collectIcon, '收藏'),
                    SizedBox(
                      width: 8.w,
                    ),
                    _setBtnStyle('shop.png', '我要卖'),
                    SizedBox(
                      width: 8.w,
                    ),
                    _shopCarBadges()
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(right: 8.w),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    BaseInteractive(
                      childWidget: Container(
                        width: 90.w,
                        height: 40.h,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: Color(0xffF7CA36),
                            borderRadius:
                                BorderRadius.all(Radius.circular(20.h))),
                        child: Text(
                          '加入购物车',
                          style:
                              setTextStyle(12, FontWeight.w500, Colors.white),
                        ),
                      ),
                      onClick: () {
                        logger.d(111);
                      },
                    ),
                    SizedBox(
                      width: 6.w,
                    ),
                    BaseInteractive(
                      childWidget: Container(
                          width: 90.w,
                          height: 40.h,
                          decoration: BoxDecoration(
                              color: ThemeConfig.themeColor,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(20.h))),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                '立即预估到手价',
                                style: setTextStyle(
                                    10, FontWeight.w500, Colors.white),
                              ),
                              Text(
                                '￥400',
                                style: setTextStyle(
                                    10, FontWeight.w500, Colors.white),
                              ),
                            ],
                          )),
                      onClick: () {
                        Get.toNamed(Routes.fillOrder);
                      },
                    )
                  ],
                ),
              )
            ],
          ),
        ));
  }

  ///设置按钮样式
  Widget _setBtnStyle(String url, String text) {
    return ImageTextItem(
      url: url,
      width: 20.w,
      height: 20.w,
      text: text,
      style: setTextStyle(12, FontWeight.w400, ThemeConfig.boldTextColor),
      marginTop: 3,
      onTap: () {
        //点击收藏
        if (url.startsWith('collect')) {
          controller.toggleCollect();
          _setBtnStyle(url, text);
        }
      },
    );
  }

  ///购物车角标
  Widget _shopCarBadges() {
    return BaseInteractive(
      childWidget: BaseBadges(
        num: 10,
        translateX: -15,
        translateY: -20,
        badgesStyle: BadgesStyle.hasBorder,
        child: _setBtnStyle('bags_default.png', '购物车'),
      ),
      onClick: () {
        // if(Get.isRegistered()){
        //   Get.until((route) => route.settings.name==Routes.main);
        // }else{
        //   Get.offAllNamed(Routes.main,arguments:'bags',);
        // }
        Get.offAllNamed(Routes.main,arguments:'bags',);
        
      },
    );
  }
}
